import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Text } from '@tarojs/components'
import styles from './index.module.scss'
import SeckillCountdown from "@/components/countdown/seckill";
import moment from "@/assets/js/moment.min";
import TimeIcon from '@/assets/images/time-icon.png'
import {FyImg} from "@/components/index";
import {getRollBuyRecord} from "@/api/commonApi";
import { shuffle, getFilter } from "@/utils/utils"

/**
 * 用户购买记录
 */
interface IProps {
  info: any
  buyList: any
  goBuy: any
}
export default class Index extends Component<IProps, {}> {
  props: any
  state: any

  constructor() {
    super(...arguments)
    this.state = {
      seconds: 0
    }
  }

  componentDidMount() {
    const end = moment().endOf('day').valueOf()
    const cur = Number(new Date())
    const time = Math.floor((end - cur) / 1000)
    this.setState({
      seconds: time
    })
    // const { params: { id } }:any = this.$router
    // getRollBuyRecord({ productId: id }).then(({ data }) => {
    //   this.state.buyList = shuffle(data).map((item) => {
    //     item.time = Math.floor(Math.random()*20+1)
    //     item.connectSnap['name'] = getFilter(item.connectSnap['name'], 1, 0, '*')
    //     item.connectSnap['telephone'] = getFilter(item.connectSnap['telephone'], 3, 3, '*')
    //     return { name: item.connectSnap['name'], phone: item.connectSnap['telephone'], time: item.time }
    //   })
    // })
  }

  render() {
    const { seconds } = this.state
    const { buyList, goBuy, info } = this.props

    return (<View className={styles.buyRecord}>
      <View className={styles.head}>
        <View className={styles.headTitle}>厂家直供，剩余{info.stockNumber}{info.unitName}</View>
        <View className={styles.headTime}>
          <View className='d-f f-g-5'>
            <FyImg src={TimeIcon} className={styles.timeIcon}/>
            <View>限时抢购</View>
          </View>
          <SeckillCountdown seconds={seconds}/>
        </View>
      </View>
      {!!buyList.length &&
      <Swiper autoplay circular vertical interval={2000} displayMultipleItems={2} className={styles.recordList}>
        {buyList.map((item, k) => {
          return (<SwiperItem key={k}>
            {item.name && item.phone && <View className='d-f j-c-b'>
              <View>
                {item.name && <Text className='m-r-10'>{item.name}</Text>}
                {item.phone && <Text className='m-r-10'>({item.phone})</Text>}
                在{item.time}分钟前购买该品</View>
              <View className={styles.listItemBtn} onClick={() => goBuy && goBuy()}>马上抢</View>
            </View>}
          </SwiperItem>)
        })}
      </Swiper>}
    </View>)
  }
}
